<template>
	<!-- 佣金 -->
	<view class="commission_wp">
		<view class="commission_nav">
			<view class="commission_n_item">
				<view>消费补贴可提现</view>
				<view class="commission_nav_number">{{Number(info.info.feemoney).toFixed(2)}}</view>
			</view>
			<view class="com_line"></view>
			<view class="commission_n_item">
				<view>佣金可提现</view>
				<view class="commission_nav_number">{{Number(info.info.primoney).toFixed(2)}}</view>
			</view>
			<view class="commission_n_item" v-if="info.ismerch==1">
				<view>商家补贴可提现</view>
				<view class="commission_nav_number">{{Number(info.info.merchfeemoney).toFixed(2)}}</view>
			</view>
			<view class="com_line" v-if="info.ismerch==1"></view>
			<view class="commission_n_item" v-if="info.ismerch==1">
				<view>商家可提现</view>
				<view class="commission_nav_number">{{Number(info.info.merchmoney).toFixed(2)}}</view>
			</view>
		</view>
		<view class="screen">
			<view :class="{'screen_active':current==item.id}" @click="changeCurr(item.id)" v-for="item in currList">{{item.name}}</view>
		</view>
		<view class="screen_fu" v-if="currFu.length>0">
			<view class="flex_evenly">
				<view class="scr_fu_it" v-for="item in currFu" @click="changeCurr2(item.id)" :class="{'scr_fu_ac':item.id==current2}">{{item.name}}</view>
			</view>
		</view>
		<view class="scr_total" v-if="current==1||current==3||current==2||current==5||current==4">合计：<text v-if="current==3&&(current2==1||current2==2)">-</text><text>{{total[0].allmoney||0}}</text></view>
		<view class="commission_list">
			<view class="commission_item" v-for="(item,index) in list" :key="index">
				<view class="commission_info">
					<text>{{item.title}}
						<text v-if="item.title=='提现申请' && item.status == 0" style="color: #d10303;">(提现中)</text>
						<text v-if="item.title=='提现申请' && item.status == 1" style="color: #028516;" >(已到账)</text>
					</text>
					<text class="com_tip">{{item.desc}}</text>
					<text class="com_tip">{{item.createtime}}</text>
					<text class="com_tip" v-show="current==3&&item.withdrawal_type">提现方式：{{item.withdrawal_type}}</text>
					<text class="com_tip" v-show="current==3&&item.account">{{item.name}}（{{item.account}}）</text>
					<text class="com_tip" v-show="current==3&&item.tx_sq_from">支出账户：{{item.tx_sq_from}}</text>
					<text class="com_tip" v-show="current==3&&item.reason&&item.reason!=''">退回原因：{{item.reason}}</text>
				</view>
				<view class="commission_number">{{item.money_send}}</view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="isloading" src="../../static/business/loading.gif"></image>
			<view v-if="isempty">到底了~</view>
		</view>
		<view class="commission_buttons" v-if="info.istx">
			<!-- <view @click="$navTo('../userservice/shellexchange?status=1')"
				class="commission_buttons_item shell_buttons">兑换米券</view> -->
			<view @click="$navTo('../userservice/withdrawal')" class="commission_buttons_item withdrawal_buttons">提现
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					info: {
						primoney: 0,
						merchmoney: 0
					},
					ismerch: 0,
					istx: 0,
				},
				page: 0,
				list: [],
				isloading: false,
				isempty: false,
				current: 0,
				currList: [
					{id: 0, name: '全部'},
					{id: 4, name: '消费补贴'},
					{id: 1, name: '佣金奖励'},
					{id: 2, name: '营业收入'},
					{id: 5, name: '营业补贴'},
					{id: 3, name: '提现明细'}
				],
				currFu:[],
				current2: 0,
				total: 0
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad() {
			this.getinfo();
			this.getlist();
		},
		methods: {
			changeCurr(id){
				if(id==this.current) return;
				this.current = id;
				this.current2 = 0;
				this.total = 0;
				if(id==2){
					this.currFu = [
						{id: 0, name: '全部'},
						{id: 1, name: '线下付款'},
						{id: 2, name: '核销'}
					]
				}else if(id==3){
					this.currFu = [
						{id: 0, name: '全部'},
						{id: 1, name: '米券抵扣'},
						{id: 2, name: '米券兑换'},
						{id: 3, name: '提现到账'},
						{id: 4, name: '提现驳回'},
						{id: 5, name: '消费退回'}
					]
				}else if(id==4){
					this.currFu = [
						{id: 0, name: '全部'},
						{id: 1, name: '全网'},
						{id: 2, name: '门店'},
						{id: 3, name: '线下'},
						{id: 4, name: '团队'}
					]
				}else if(id==5){
					this.currFu = [
						{id: 0, name: '全部'},
						{id: 1, name: '全网'},
						{id: 2, name: '实时'}
					]
				}
				else{
					this.currFu = [];
				}
				this.list = [];
				this.page = 0;
				this.getlist();
				this.getTotal();
				
			},
			changeCurr2(id){
				if(id==this.current2) return;
				this.current2 = id;
				this.total = 0;
				this.list = [];
				this.page = 0;
				this.getlist();
				this.getTotal();
			},
			getinfo() {
				this.$axios('Moneylog/main', 'POST', 'commission').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getlist() {
				this.page++;
				this.isloading = true;
				this.isempty = false;
				this.$axios('Moneylog/list', 'POST', 'commission', {
					page: this.page,
					type: this.current,
					status: this.current2
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						var length = res.data.data.list.length;
						this.list = this.list.concat(res.data.data.list);
						this.isempty = length <= 0;
					}
				})
			},
			getTotal(){
				this.$axios('Moneylog/moneyInfo','POST','commission',{
					type: this.current,
					status: this.current2
				}).then(res=>{
					if(res.data.code == 200){
						this.total = res.data.data.info;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FBF8FE;
		color: $font-color-dark;
	}
.screen{
	line-height: 3;
	// padding: 20rpx 0 10rpx;
	display: flex;
	justify-content: space-between;
	color: #333333;
	font-size: 26rpx;
	font-weight: 600;
	view{
		// width: 50%;
		text-align: center;
	}
}
.screen_active{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: $bg-color;
	// background: #fff;
	&::after{
		content: '';
		width: 46rpx;
		height: 8rpx;
		background: #8615E1;
		display: block;
		margin-top: -12rpx;
		border-radius: 8rpx;
	}
}
.screen_fu{
	margin-top: 10rpx;
	.scr_fu_it{
		// width: 124rpx;
		line-height: 38rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
		// margin: 10rpx 20rpx 0;
		padding: 0;
		flex: 1;
		margin: 0 8rpx;
	}
	.scr_fu_ac{
		color: #8615E1;
	}
}
.scr_total{
	font-size: 24rpx;
	margin-top: 10rpx;
	text{
		color: #AF141D;
	}
}
	.commission_wp {
		padding: 0 20rpx;
		padding-bottom: 140rpx;
	}

	.commission_nav {
		background: linear-gradient( 135deg, #B92DF1 0%, #8A17E2 100%);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// height: 204rpx;
		border-radius: 24rpx;
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
		padding: 20rpx 0;
		flex-wrap: wrap;
		.com_line{
			width: 2rpx;
			height: 50rpx;
			background: rgba(255,255,255,.7);
		}
		.commission_n_item{
			width: 49.5%;
			padding: 15rpx 0;
		}
		.commission_nav_number {
			font-size: 40rpx;
			font-weight: 600;
			margin-top: 10rpx;
		}
	}
	.commission_n_item2 {
		padding: 0 40upx;
		font-size: 26upx;
	}

	.commission_nav_number2 {
		font-size: 34upx;
	}

	.c_tab {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		line-height: 70upx;
	}

	.c_tab_item {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.c_tab_item:nth-of-type(1) {
		border-right: 1px hsl(0, 0%, 87%) solid;
	}

	.tab_active {
		color: $base-color;
	}

	.tab_active:after {
		content: '';
		border-bottom: 2px $base-color solid;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60upx;
	}

	.commission_detailed {
		font-size: 30upx;
		padding: 20upx;
	}

	.commission_item {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		// height: 130rpx;
		margin-top: 20rpx;
		border-radius: 12rpx;
	}

	.commission_info {
		display: flex;
		flex-direction: column;
		font-weight: bold;
		text {
			line-height: 44rpx;
		}
		.com_tip{
			color: $font-color-light;
			font-weight: 400;
			font-size: 24rpx;
		}
	}

	.commission_number {
		font-weight: bold;
		color: #8615E1;
	}
	.loading_message{
		margin-top: 10rpx;
		image {
			display: block;
			margin: 0 auto;
			height: 60upx;
			width: 60upx;
		}
		view {
			text-align: center;
			color: $font-color-spec;
		}
	}
	.commission_buttons {
		position: fixed;
		bottom: 30upx;
		display: flex;
		align-items: center;
		padding: 0 10upx;
		width: 100%;
	}

	.commission_buttons_item {
		background-color: #f0f;
		border-radius: 40upx;
		color: #fff;
		flex: 1;
		font-size: 28upx;
		margin: 0 10upx;
		text-align: center;
		line-height: 80upx;
		letter-spacing: 3px;
	}

	.shell_buttons {
		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
	}

	.withdrawal_buttons {
		background: linear-gradient(to right, #EA5249, #EC694C, #EB835D);
	}
</style>
